<script setup lang="ts">
// import Dialog from './Dialog.vue'
// import DialogView from './DialogView.vue'
// import getServiceList from '@/assets/localdatas/configurationManage/extendConfiguration/get_service_list.json'
// import getServiceDycofnigMain from '@/assets/localdatas/configurationManage/extendConfiguration/get_service_dyconfig_main.json'
// import getServiceDycofnigGray from '@/assets/localdatas/configurationManage/extendConfiguration/get_service_dyconfig_gray.json'

import { useCommonStore } from '@/store/main'
import { tableDataInit, FORMAT_JSON_FOR_NOTES } from '@/common/hooks'

import type { TableHeaderColumnsItemType, TableDataInitType } from '@/components/tableType'
import type { TabsPaneContext } from 'element-plus'

import { 
	INJECT_SYS_NAME, 
	INJECT_THEME_COLOR,
	INJECT_REQUEST_SUCCESS_NO
} from '@/common/provideType'

import { 
	serviceListRqs,
	serviceDycofnigMainRqs,
	serviceDycofnigGrayRqs,
// 	serviceManageInstanceListRqs,
	// serviceConfigMainListRqs,
// 	serviceConfigGrayListRqs,
// 	addServiceConfigMainRqs,
// 	addServiceConfigGrayRqs,
// 	modServiceConfigMainRqs,
// 	modServiceConfigGrayRqs,
// 	delServiceConfigMainRqs,
// 	delServiceConfigGrayRqs,
// 	delServiceConfigMultiMainRqs,
// 	delServiceConfigMultiGrayRqs
} from '@/request/api'

const SYS_NAME = inject(INJECT_SYS_NAME)!
const THEME_COLOR = inject(INJECT_THEME_COLOR)!
const REQUEST_SUCCESS_NO = inject(INJECT_REQUEST_SUCCESS_NO)
const $store = useCommonStore()
const vPreventReClick = inject('vPreventReClick')
const vAuth = inject('vAuth')
const TAB_MAIN = 'tabMain'
const TAB_GRAY = 'tabGray'
enum VERSION_TAB {
	main,
	gray
}
const dialogRef = ref()
const dialogViewRef = ref()

const tableHeaderColumnsMain: TableHeaderColumnsItemType[] = reactive([
	{label: 'Key', prop: 'key', width: 240},
	{label: 'Value', prop: 'value'}
])
const tableHeaderColumnsGray: TableHeaderColumnsItemType[] = reactive([
	{label: '实例ID', prop: 'instance_id', width: 240},
	{label: 'Key', prop: 'key', width: 240},
	{label: 'Value', prop: 'value'}
])
const tableData: TableDataInitType = reactive({
	...tableDataInit,
	lineHeightFlag: true,
	serialNumberHideFlag: true,
	tableMaxHeight: 371
})

type RowType = typeof tableData.data[0]
type RowsType = RowType[]
type TabRecodeItemType = {
	currentPage: number
	pageSize: number
}
type TabRecodeType = {
	tabMain: TabRecodeItemType
	tabGray: TabRecodeItemType
}
type ServiceListType = {
	service_name: string
	deploy_type: number
	versionTab?: number
	tabRecode?: TabRecodeType
	[property: string]: any
}
interface MainParamsType {
	serviceName: string
	serviceIndex: number
	serviceList: ServiceListType[]
	[property: string]: any
}
const mainParams: MainParamsType = reactive({
	serviceList: [],
	serviceName: '',
	serviceIndex: -1,

	// tab 主版本/灰版本
	activeTab: 'main',

	// 新增按钮动图内容
	addServiceConfigName: '新增配置',
	successMessage: '',

	dialogConfig: {
		isAdd: false,
		isGray: false,
		title: '',
		width: 1040,
		content: {
			key: '',
			value: '',
			instance_id: ''
		}
	},

	// 预览
	dialogViewConfig: {
		isGray: false,
		title: '',
		width: 1040,
		content: {
			key: '',
			value: '',
			instance_id: ''
		}
	}
})

// watch(() => $store.configurationExtendLocalData, newVal => {
// 	const mainData =  $store.configurationExtendLocalData.mainData
// 	tableDataMain.data = mainData.length 
// 		? mainData 
// 		: tableDataMain.data
// 	tableDataMain.total = tableDataMain.data.length

// 	const grayData = $store.configurationExtendLocalData.grayData
// 	tableDataGray.data = grayData.length 
// 		? grayData 
// 		: tableDataGray.data
// 	tableDataGray.total = tableDataGray.data.length
// }, {deep: true, immediate: true})

// 请求服务列表
const queryServiceListFn = async () => {debugger
	// 模拟返回结果
	const params = {sys_name: SYS_NAME}
	let res = await serviceListRqs(params)
	if(res?.code === REQUEST_SUCCESS_NO) {
		mainParams.serviceList = res.data!
		mainParams.serviceName = res.data[0].service_name
		mainParams.serviceIndex = 0
		// mainParams.activeTab = 'main'
		mainParams.serviceList.forEach((item => {
			switch (item.deploy_type) {
				case 1:
					item.bgColor = 'success'
					break
				case 2:
					item.bgColor = 'warning'
					break
				case 3:
					item.bgColor = 'danger'
					break
			}
			item.versionTab = VERSION_TAB.main
			item.tabRecode = {
				[TAB_MAIN]: {
					currentPage: tableData.currentPage, 
					pageSize: tableData.pageSize
				}, 
				[TAB_GRAY]: {
					currentPage: tableData.currentPage, 
					pageSize: tableData.pageSize
				}
			}
		}))

		console.log(666, mainParams.serviceList);
		// 初始化第一个服务对应的服务配置列表
		queryServiceConfigListFn({
			serviceName: mainParams.serviceName
			// activeTab: mainParams.activeTab,
		})
	} 
}

/**
 * 请求服务配置
 * isInitFlag,  是否初始化
 * serviceName, 服务名
 * isTabCutFlag, 是否手动点击切换触发
 */
const queryServiceConfigListFn = async ({
	serviceName,
	activeTab
}: {
	serviceName: string
	activeTab?: string
	[property: string]: any
}) => {debugger
	// 获取当前停留的 tab 版本（默认主版本）
	let isTabMainFlag = false
	let activeTabType: keyof TabRecodeType = TAB_MAIN

	// 切换服务, 更新当前服务名，服务下标，tab名称
	if(mainParams.serviceName !== serviceName) {
		// 更新服务名及服务序号
		mainParams.serviceName = serviceName
		mainParams.serviceList.forEach(((item, index) => {
			if(item.service_name === serviceName) {
				mainParams.serviceIndex = index
				mainParams.activeTab = VERSION_TAB[item.versionTab!]

				isTabMainFlag = VERSION_TAB[item.versionTab!] === VERSION_TAB[0]
				activeTabType = isTabMainFlag ? TAB_MAIN : TAB_GRAY
				tableData.currentPage = item.tabRecode?.[activeTabType].currentPage!
				tableData.pageSize = item.tabRecode?.[activeTabType].pageSize!
			}
		}))
	} else {
		// if(mainParams.successMessage) mainParams.successMessage = ''
		const serviceItem = mainParams.serviceList[mainParams.serviceIndex]
	
		// tab
		if(activeTab) {
			serviceItem.versionTab = VERSION_TAB[activeTab as keyof typeof VERSION_TAB]
			isTabMainFlag = activeTab === VERSION_TAB[0]
			activeTabType = isTabMainFlag ? TAB_MAIN : TAB_GRAY
			tableData.currentPage = serviceItem.tabRecode?.[activeTabType].currentPage!
			tableData.pageSize = serviceItem.tabRecode?.[activeTabType].pageSize!
		}
		// 切换分页
		else {
			isTabMainFlag = VERSION_TAB[serviceItem.versionTab!] === VERSION_TAB[0]
			// activeTabType = isTabMainFlag ? TAB_MAIN : TAB_GRAY
	
			mainParams.serviceList.forEach(((item, index) => {
				if(item.service_name === serviceName) {
					// mainParams.serviceIndex = index
					// mainParams.activeTab = VERSION_TAB[item.versionTab!]

					isTabMainFlag = VERSION_TAB[item.versionTab!] === VERSION_TAB[0]
					activeTabType = isTabMainFlag ? TAB_MAIN : TAB_GRAY
					// tableData.currentPage = item.tabRecode?.[activeTabType].currentPage!
					// tableData.pageSize = item.tabRecode?.[activeTabType].pageSize!

					if(mainParams.activeTab === VERSION_TAB[item.versionTab!]) {
						if(item.tabRecode) item.tabRecode[activeTabType] = {
							currentPage: tableData.currentPage,
							pageSize: tableData.pageSize
						}
					}
				}
			}))
		}
	}
	
	let params = {
		sys_name: SYS_NAME,
		service_name: serviceName,
		page_no: tableData.currentPage,
		page_size: tableData.pageSize
	}
	// submitParams 提交数据
	const res = isTabMainFlag
		? await serviceDycofnigMainRqs(params)
		: await serviceDycofnigGrayRqs(params)

	if(res?.code === REQUEST_SUCCESS_NO) {
		tableData.data = res.data
		tableData.total = res.total!

		// 根据不同服务单独设置分页
		// if(!serviceItem.hasOwnProperty('tabRecode')) {
		// 	serviceItem.tabRecode = {
		// 		tabMain: {},
		// 		tabGray: {}
		// 	}
		// }
		// if(mainParams.versionTab === VERSION_TAB.MAIN) {
		// 	if(!Object.keys(serviceItem.tabRecode.tabMain).length) {
		// 		serviceItem.tabRecode.tabMain = {
		// 			currentPage: 1,
		// 			pageSize: 10
		// 		}
		// 	} else {
		// 		serviceItem.tabRecode.tabMain = {
		// 			currentPage: tableData.currentPage,
		// 			pageSize: tableData.pageSize
		// 		}
		// 	}
		// }

		// if(mainParams.versionTab === VERSION_TAB.GRAY) {
		// 	if(!Object.keys(serviceItem.tabRecode.tabGray).length) {
		// 		serviceItem.tabRecode.tabGray = {
		// 			currentPage: 1,
		// 			pageSize: 10
		// 		}
		// 	} else {
		// 		serviceItem.tabRecode.tabGray = {
		// 			currentPage: tableData.currentPage,
		// 			pageSize: tableData.pageSize
		// 		}
		// 	}
		// }

		// // 当前服务实例对应的分页数据
		// tableData.currentPage = serviceItem?.tabRecode?.[mainParams.activeTab].currentPage || tableData.currentPage
		// tableData.pageSize = serviceItem?.tabRecode?.[mainParams.activeTab].pageSize || tableData.pageSize

		type DealDataFnType = {
			(params: RestaurantType[]): RestaurantType[]
		}
		const dealDataFn: DealDataFnType = data => data.map(item => ({value: item.key}))
		restaurants.value = dealDataFn(res.data)
	}
}

// tab 版本切换
const tabHandleClick = (tab: TabsPaneContext) => {debugger
	// 排除点击的是当前已选中的 tab 项
	if(tab.paneName !== mainParams.activeTab) {
		mainParams.addServiceConfigName = mainParams.addServiceConfigName === '新增配置' ? '新增灰度配置' : '新增配置'
		// mainParams.versionTab = tab.paneName === 'main' ? VERSION_TAB.MAIN : VERSION_TAB.GRAY
		// 更新 服务对应版本的实力数据
		if(typeof tab.paneName === 'string') {
			queryServiceConfigListFn({
				serviceName: mainParams.serviceName, 
				activeTab: tab.paneName
			})
		}
	}
}

// 关联搜索
type RestaurantType = {
	value: string
	[property: string]: any
}
const querySearchKey = ref('')
const restaurants = ref<RestaurantType[]>()
const querySearch = (queryString: string, cb: Function) => {
	const results = queryString 
		? restaurants.value?.filter(createFilter(queryString))
		: restaurants.value;
	cb(results)
}
const createFilter = (queryString: string) => {
	return (restaurant: RestaurantType) => {
		return (
			restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
		)
	}
}

let tableDataCopy: TableDataInitType
const searchFn = () => {
	// 备份数据用于查找结果后的数据恢复
	tableDataCopy = JSON.parse(JSON.stringify(tableData))
	if(querySearchKey.value === '' || querySearchKey.value === undefined) return ElMessage.error('查询内容不能为空')
	updateTableDataEventFn({
		updateTableDataFlag: 'search',
		searchKey: querySearchKey.value.toLowerCase()
	})
}

// 关联搜索 & 表格翻页
const updateTableDataEventFn = ({
	updateTableDataFlag = '',
	searchKey
	// currentPage = 0,
	// pageSize = 0
}: {
	updateTableDataFlag: string
	searchKey?: string
}) => {debugger
	if(updateTableDataFlag === 'search') {
		// 搜索
		const data = tableDataCopy.data.filter(item => {
			if(item?.key?.toLowerCase()?.includes(searchKey!)) return item
		})

		tableData.data = data
		tableData.currentPage = 1
		tableData.total = tableData.data.length
	} 
	// else if(updateTableDataFlag === 'reset') {
	// 	// 恢复
	// 	queryServiceConfigListFn({isInitFlag: true})
		
	// } 
	else if(updateTableDataFlag === 'cutPage') {
		// 翻页
		// tableData.currentPage = currentPage
		// tableData.pageSize = pageSize
		queryServiceConfigListFn({
			serviceName: mainParams.serviceName
		})
	}
} 

// watch(() => mainParams.searchKey, newValue => {
// 	// 恢复 el-autocomplete 下拉选择框的值
// 	if(newValue === '') updateTableDataEventFn({updateTableDataFlag: 'reset'})
// })



// 新增配置
const addConfigFn = () => {
	// if(mainParams.activeTab === 'main') {
	// 	// 主版本
	// 	mainParams.dialogConfig = {
	// 		...mainParams.dialogConfig,
	// 		isAdd: true,
	// 		isGray: false,
	// 		title: '新增主版本配置',
	// 		content: {
	// 			key: '',
	// 			value: ''
	// 		}
	// 	}
	// } else {
	// 	// 灰度版本
	// 	mainParams.dialogConfig = {
	// 		...mainParams.dialogConfig,
	// 		isAdd: true,
	// 		isGray: true,
	// 		title: '新增灰度版本配置',
	// 		content: {
	// 			key: '',
	// 			value: '',
	// 			instance_id: ''
	// 		}
	// 	}
	// }
	// dialogRef.value.openDialogFn(mainParams.dialogConfig)
}

// // 预览
// const viewTableDataEventFn = row => {
// 	if(mainParams.activeTab === 'main') {
// 		// 主版本
// 		mainParams.dialogViewConfig = {
// 			...mainParams.dialogViewConfig,
// 			isGray: false,
// 			title: '主版本配置预览',
// 			content: row
// 		}
// 	} else {
// 		// 灰度版本
// 		mainParams.dialogViewConfig = {
// 			...mainParams.dialogViewConfig,
// 			isGray: true,
// 			title: '灰度版本配置预览',
// 			content: row
// 		}
// 	}
// 	dialogViewRef.value.openDialogViewFn(mainParams.dialogViewConfig)
// }

// // 编辑
// const editTableDataEventFn = row => {
// 	if(mainParams.activeTab === 'main') {
// 		// 主版本
// 		mainParams.dialogConfig = {
// 			...mainParams.dialogConfig,
// 			isAdd: false,
// 			isGray: false,
// 			title: '主版本配置编辑',
// 			content: row
// 		}
// 	} else {
// 		// 灰度版本
// 		mainParams.dialogConfig = {
// 			...mainParams.dialogConfig,
// 			isAdd: false,
// 			isGray: true,
// 			title: '灰度版本配置编辑',
// 			content: row
// 		}
// 	}
// 	dialogRef.value.openDialogFn(mainParams.dialogConfig)
// }

// // 删除，从表格组件 TableOperation.vue 过来
// // 删除单条数据 $emit('handleDeleteEvent', row)
// // 全删 $emit('handleDeleteEvent', null, true)
// const handleDeleteEventFn = (row, delAll = false) => {
// 	deleteConfirm(row, delAll)
// }

// // 表格删除按钮事件确认
// const deleteConfirm = (row, delAll) => {
// 	ElMessageBox.confirm(
// 		'数据将被永久删除，是否确认删除？',
// 		'删除提示',
// 		{
// 			confirmButtonText: '确定',
// 			cancelButtonText: '取消',
// 			type: 'warning',
// 		}
// 	).then(() => {
// 		let params = {
// 			name: mainParams.serviceName
// 		}
// 		if(delAll) {
// 			// 删除多条数据
// 			let arrTmp = []
// 			if(mainParams.dialogConfig.isGray) {// 判断是否灰度版本
// 				// 灰度版本
// 				row.forEach(item => {
// 					if(item.instance_id && arrTmp.some(itemInner => itemInner.instance_id === item.instance_id)) {
// 						arrTmp.forEach(arrItem => {
// 							if(arrItem.instance_id === item.instance_id) arrItem.keys.push(item.key)
// 						})
// 					} else {
// 						arrTmp.push({
// 							instance_id: item.instance_id,
// 							keys: [item.key]
// 						})
// 					}
// 				})
// 				params.instances = arrTmp
// 			} else {
// 				// 主版本
// 				params.keys = row.map(item => item.key)
// 			}
// 			deleteRowsFn(params, delAll)
// 		} else {
// 			// 删除一条数据
// 			params.key = row.key
// 			if(mainParams.dialogConfig.isGray) params.instance_id = row.instance_id
// 			deleteRowFn(params, delAll)
// 		}
// 	}).catch(() => {
// 		ElMessage({
// 			type: 'info',
// 			message: '删除操作已取消',
// 		})
// 	})
// }

// // 执行具体删除动作（单个）
// const deleteRowFn = async (params, delAll) => {
// 	// let res = mainParams.dialogConfig.isGray 
// 	// 	? await delServiceConfigGrayRqs(params) 
// 	// 	: await delServiceConfigMainRqs(params) 
	
// 	const res = {code: 0}
// 	if(res && res.code === REQUEST_SUCCESS_NO) {
// 		const isGray = mainParams.dialogConfig.isGray
// 		$store.setLocalJson({
// 			eventType: 'delete',
// 			listName: mainParams.dialogConfig.isGray ? 'grayData' : 'mainData',
// 			delAll,
// 			content: params
// 		})
// 		mainParams.successMessage = '主版本配置删除成功'
// 		if(isGray) {
// 			mainParams.successMessage = '灰度版本配置删除成功'
// 		}
// 		// 删除公司提示
// 		ElMessage({
// 			type: 'success',
// 			message: mainParams.successMessage
// 		})
// 		// 通知更新
// 		queryServiceConfigListFn({serviceName: mainParams.serviceName})
// 	}
// }

// // 执行具体删除动作（多个）
// const deleteRowsFn = async (params, delAll) => {
// 	// let res = params['isGray'] 
// 	// 	? await delServiceConfigMultiMainRqs(params) 
// 	// 	: await delServiceConfigMultiGrayRqs(params) 
	
// 	const res = {code: 0}
// 	if(res && res.code === REQUEST_SUCCESS_NO) {
// 		const isGray = mainParams.dialogConfig.isGray
// 		$store.setLocalJson({
// 			eventType: 'delete',
// 			listName: isGray ? 'grayData' : 'mainData',
// 			delAll,
// 			content: params
// 		})
// 		mainParams.successMessage = '主版本配置删除成功'
// 		if(isGray) {
// 			mainParams.successMessage = '灰度版本配置删除成功'
// 		}
// 		// 删除公司提示
// 		ElMessage({
// 			type: 'success',
// 			message: mainParams.successMessage
// 		})
// 		// 通知更新
// 		queryServiceConfigListFn({serviceName: mainParams.serviceName})
// 	}
// }

// 翻页，更新当前页对应的数据
const tableDataUpdateEventFn = () => {debugger
	console.log('55566778899');
	// 单独记录每个服务实例对应的分页状态
	// const serviceItem = mainParams.serviceList[mainParams.serviceIndex]
	// if(serviceItem.versionTab === VERSION_TAB.main) {
	// 	if(serviceItem.tabRecode) serviceItem.tabRecode.tabMain = {
	// 		currentPage: tableData.currentPage,
	// 		pageSize: tableData.pageSize
	// 	}
	// }

	// if(serviceItem.versionTab === VERSION_TAB.gray) {
	// 	if(serviceItem.tabRecode) serviceItem.tabRecode.tabGray = {
	// 		currentPage: tableData.currentPage,
	// 		pageSize: tableData.pageSize
	// 	}
	// }

	queryServiceConfigListFn({
		serviceName: mainParams.serviceName
	})
}

onMounted(() => {
	queryServiceListFn()
})
</script>

<template>
	<br /><br />
	mainParams.serviceName = {{ mainParams.serviceName }}
	<br /><br />
	mainParams.serviceIndex = {{ mainParams.serviceIndex }}
	<br /><br />
	mainParams.activeTab = {{ mainParams.activeTab }}
	<br /><br />

	tableData.currentPage = {{ tableData.currentPage }}
	<br /><br />
	tableData.pageSize = {{ tableData.pageSize }}
	<br /><br />
	
mainParams.serviceList = {{ mainParams.serviceList }}
<br /><br />
restaurants = {{ restaurants }}

	<ul class="service-bar list-inline child-mr-15 mb-20">
		<li 
			v-for="(item, index) in mainParams.serviceList" 
			:key="index" 
			:class="[`bg-${item.bgColor} ${mainParams.serviceIndex === index ? 'active bg-white' : ''}`]" 
		>
			<div 
				class="service-item" 
				:class="[`bg-${item.bgColor} ${mainParams.serviceIndex === index ? 'active' : ''}`]" 
				@click="queryServiceConfigListFn({serviceName: item.service_name})" 
			>
				<div class="desc" :title="item.service_name" :alt="item.service_name">
					{{ item.service_name }}
				</div>
			</div>
		</li>
	</ul>
	
	<el-form class="search-bar" @submit.prevent>
		<span class="search-item">
			<el-autocomplete 
				v-model="querySearchKey" 
				:fetch-suggestions="querySearch" 
				clearable 
				placeholder="请输入配置项的 Key 值" 
				@keyup.enter="searchFn" 
			>
				<template #suffix>
					<el-icon class="el-input__icon" @click="querySearch">
						<edit />
					</el-icon>
				</template>
			</el-autocomplete>
		</span>
		<el-button 
			type="primary" 
			:class="[`btn btn-lg btn-${THEME_COLOR}`]" 
			v-preventReClick 
			v-auth 
			@click="searchFn" 
		>搜 索</el-button>

		<el-button 
			type="primary" 
			:class="[`btn btn-${THEME_COLOR}`]" 
			v-preventReClick 
			@click="addConfigFn" 
		>
			<el-icon><Plus /></el-icon>
			{{ mainParams.addServiceConfigName }}
		</el-button>
	</el-form>

	<div class="tab-bar">
		<el-tabs
			v-model="mainParams.activeTab" 
			type="card" 
			@tab-click="tabHandleClick" 
		>
			<el-tab-pane label="主版本" name="main">
				<TableOperation 
					:tableData="tableData" 
					:tableHeaderColumns="tableHeaderColumnsMain" 
					:isPreviewFlag="true" 
					:isEditFlag="true" 
					:isDeleteFlag="true" 
					@TABLE_DATA_UPDATE_EVENT="tableDataUpdateEventFn" 
				/>
				<!-- @updateDataEvent="updateDataEventFn" 
					@viewTableDataEvent="viewTableDataEventFn"
					@editTableDataEvent="editTableDataEventFn" 
					@handleDeleteEvent="handleDeleteEventFn"  -->
			</el-tab-pane>

			<el-tab-pane label="灰度版本" name="gray">
				<TableOperation 
					:tableData="tableData" 
					:tableHeaderColumns="tableHeaderColumnsGray" 
					:isPreviewFlag="true" 
					:isEditFlag="true" 
					:isDeleteFlag="true" 
					@TABLE_DATA_UPDATE_EVENT="tableDataUpdateEventFn" 
				/>
				<!-- @updateDataEvent="updateDataEventFn" 
					@viewTableDataEvent="viewTableDataEventFn" 
					@editTableDataEvent="editTableDataEventFn" 
					@handleDeleteEvent="handleDeleteEventFn" -->
			</el-tab-pane>
		</el-tabs>
	</div>
<!-- 
	<Dialog ref="dialogRef" />
	<DialogView ref="dialogViewRef" /> -->
</template>

<style lang="scss" scoped>
.service-bar {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;

	li {
		margin-bottom: .1rem;
		padding: .04rem;
		border-radius: .1rem;
		border: .02rem solid transparent;
		&.active {
			border-color: $color-night;
		}
	}
	.service-item {
		position: relative;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: .15rem;
		height: .7rem;
		border-radius: .1rem;
		font-size: .24rem;
		cursor: pointer;
		overflow: hidden;

		.desc {
			font-size: .16rem;
		}

		&.active {
			color: $color-night;
			.current-icon {
				display: block;
			}
		}
	}
}

.search-bar {
	margin-bottom: .2rem;
	:deep(.search-item) {
		margin-right: .15rem;
		input.el-input__inner {
			width: 2.94rem;
		}
		.el-input__suffix {
			position: absolute;
			right: .05rem;
		}
	}
}
</style>